<template>
  <h1>This is an about page</h1>
  <Heading :msg="msg" />
  <button @click="handleClick">修改标题</button>
  <h1>{{ counter }}</h1>
  <ol>
    <li v-for="(item, index) of list" :key="index">
      {{ item }}
    </li>
  </ol>
</template>
<!--
vue2 选项式： {data, computed, watch, props, 生命周期}

** vue3 兼容 vue2 的大部分语法和api

vue3 组合式 API, setup()
1. 在组件创建之前执行
2. 避免使用 this

是一个接收 props 和 context 的函数
-->
<script>
import { ref, onMounted, onBeforeMount, watch } from "vue";
import Heading from "@/vue3-component/Heading";
export default {
  components: { Heading },
  setup() {
    /*let counter = 0
    const handleClick = () => {
      counter += 1
      console.log(counter)
    }*/
    // 声明 data 使用 const num = ref(1)
    // 获取data 使用 num.value
    const counter = ref(0);
    const msg = ref("我是一个props的标题");
    const list = ref(["奔驰", "宝马", "马自达"]);
    const handleClick = () => {
      msg.value = msg.value.repeat(2);
      counter.value += 1;
      // console.log(counter) // Proxy 对象
      console.log(counter.value);
      list.value.push(Date.now());
    };

    onMounted(() => {
      counter.value += 10;
      counter.value *= 10;
      console.log("onMounted");
    });

    onBeforeMount(() => {
      console.log("onBeforeMount");
    });
    // created || beforeCreate
    console.log("setup start");

    watch(counter, (newVal, oldVal) => {
      console.log(newVal, oldVal);
    });

    return {
      msg,
      list,
      counter,
      handleClick,
    };
  },
  // data() {},
  // computed: {}
  // methods: {}
};
</script>
